<template>
  <el-card class="box-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <el-input placeholder="输入：内容" clearable style="width: 220px;margin-right: 10px"/>
        <el-button type="primary" plain :icon="Search">搜索</el-button>
      </div>
    </template>
    <div>
      <div class="table-title">
        <span>日志列表</span>
        <div>
          <el-button type="warning" plain :icon="Delete">批量删除</el-button>
        </div>
      </div>
      <el-table :data="tableData"
                stripe
                border
                :header-cell-style="{background:'#E91E63',color:'#fff'}"
                highlight-current-row>
        <el-table-column type="selection"/>
        <el-table-column type="index" label="序号" width="55"/>
        <el-table-column prop="content" label="内容"/>
        <el-table-column prop="type" label="类型" width="220">
          <template #default="scope">
            <el-tag type="danger" v-if="scope.row.type===0">异常</el-tag>
            <el-tag type="success" v-else>正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="生成时间" width="220"/>
        <el-table-column label="操作" width="110" align="center">
          <template #default="scope">
            <el-button type="warning" plain :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import {reactive} from "vue";
import {Search, Edit, Delete, CirclePlus} from '@element-plus/icons-vue'
import moment from "moment";

export default {
  name: "ErrorLog",
  setup() {
    const tableData = reactive([{
      content: '提交了报表功能。，',
      type: 1,
      date: moment().format('yyyy-MM-DD HH:MM:ss')
    }, {
      content: 'An unexpected error occurred: "EPERM: operation not permitted, unlink \'G:\\\\VueDemo\\\\vue3_elementui_demo\\\\node_modules\\\\esbuild-windows-64\\\\esbuild.exe\'".\n',
      type: 0,
      date: moment().format('yyyy-MM-DD HH:MM:ss')
    }]);
    return {
      Search, Edit, Delete, CirclePlus,
      tableData
    }
  }
}
</script>

<style scoped>

</style>